<template>
  <div
    class="b-2 rd-6 cursor-pointer hover:b-primary"
    :class="[checked ? 'b-primary' : 'b-transparent']"
  >
    <n-tooltip :placement="layoutConfig[mode].placement" trigger="hover">
      <template #trigger>
        <div
          class="layout-card__shadow gap-6 w-96 h-64 p-6 rd-4"
          :class="[mode.includes('vertical') ? 'flex' : 'f-col']"
        >
          <slot></slot>
        </div>
      </template>
      <span>{{ label }}</span>
    </n-tooltip>
  </div>
</template>

<script setup lang="ts">
import type { PopoverPlacement } from "naive-ui";

interface Props {
  /** 布局模式 */
  mode: Theme.LayoutMode;
  /** 布局模式文本 */
  label: string;
  /** 选中状态 */
  checked: boolean;
}
defineProps<Props>();

type LayoutConfig = Record<
  Theme.LayoutMode,
  {
    placement: PopoverPlacement;
    headerClass: string;
    menuClass: string;
    mainClass: string;
  }
>;

const layoutConfig: LayoutConfig = {
  vertical: {
    placement: "bottom-start",
    headerClass: "",
    menuClass: "w-1/3 h-full",
    mainClass: "w-2/3 h-3/4",
  },
  "vertical-mix": {
    placement: "bottom",
    headerClass: "",
    menuClass: "w-1/4 h-full",
    mainClass: "w-2/3 h-3/4",
  },
  horizontal: {
    placement: "bottom",
    headerClass: "",
    menuClass: "w-full h-1/4",
    mainClass: "w-full h-3/4",
  },
  "horizontal-mix": {
    placement: "bottom-end",
    headerClass: "",
    menuClass: "w-full h-1/4",
    mainClass: "w-2/3 h-3/4",
  },
};
</script>

<style scoped>
.layout-card__shadow {
  box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.18);
}
</style>
